<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Class-组件</title>
</head>
<style>
  body {
    margin: 0;
    padding: 0;
    background-color: grey;
    font-family: '华文行楷';
  }

  h1 {
    margin-bottom: 5px;
  }
</style>
<body>
<div id="container"></div>

<!--引入react核心库-->
<script src="../../js-依赖包/react.development.js"></script>
<!--引入react.dom 用于支出react操作DOM-->
<script src="../../js-依赖包/react-dom.development.js"></script>
<!--引入babel  用于将jsx转换为js-->
<script src="../../js-依赖包/babel.min.js"></script>

<script type="text/babel"> //这里一定要将类型写为babel

// 1. 创建Class类式组件
class MyComponent extends React.Component{
  render(){   // render放在MyComponent类的原型对象上,供实例化对象使用
              // render中的 this 指的是 MyComponent 组件实例对象
    console.log(this)
    return <h2>我是Class类定义的组件</h2>
  }
}
// 2. 渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('container'))
/*
  执行了ReactDOM.render(<MyComponent/>··· 发生了什么？？
    1. React解析组件标签，找到了MyComponent组件
    2. 发现组件是Class类定义的，随后自动new出该类的实例，并通过该实例调用到原型上的render方法
    3. 将render返回的虚拟DOM转换为真实的DOM，随后渲染到页面
*/

</script>
</body>
</html>